<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>{{ index+1 }}</span>
      <el-button style="float: right; padding: 3px 0" type="text" @click="remove(index)">删除</el-button>
    </div>
    <el-form label-width="100px" style="margin-top:10px;margin-right:10px;margin-bottom:10px">
      <el-form-item label="题目类型">
        <el-select v-model="subtype" placeholder="请选择" @change="typeChange">
          <el-option label="判断题" :value="0" />
          <el-option label="单选题" :value="1" />
          <el-option label="多选题" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="题干">
        <el-input v-model="subask" placeholder="请输入内容" style="width: 80%" @blur="changeAsk" />
      </el-form-item>
      <el-form-item label="图片1">
        <!-- 图片上传-->
        <el-upload
          class="avatar-uploader"
          :action="uploadurl"
          :headers="{Authorization: 'Bearer ' + token }"
          :show-file-list="false"
          name="imgfile"
          :on-success="askimageHandleAvatarSuccess"
          :before-upload="askImageBeforeAvatarUpload">
          <img v-if="subAskImage" :src="subAskImage" class="avatar">
          <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
          <img v-else src="../../assets/images/upload.png" class="upload-img">
        </el-upload>
        <!-- <span>建议尺寸：560px*250px，大小不超过1M，格式为：jpg/bmp/png/gif</span> -->
      </el-form-item>
      <el-form-item label="答案">
        <el-input v-model="subanwser" placeholder="请输入答案" style="width: 80%" @blur="updateAnswerKey" />
      </el-form-item>
      <!--<draggable v-bind="answerList" :options="{group:'answer'}" @start="onStart" @end="onEnd">-->
        <el-row style="width: 80%">
        <el-col v-for="(item,index) in answerList" :key="index" :span="12">
          <el-form-item :label="item.character">
            <el-input v-model="item.content" @blur="updateoption" />
            <el-upload
              class="avatar-uploader"
              :action="uploadurl"
              :headers="{Authorization: 'Bearer ' + token }"
              :show-file-list="false"
              name="imgfile"
              :on-success="(res) => {handleAvatarSuccess(res, item)}"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="item.optionImg" :src="item.optionImg" class="avatar">
              <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
              <img v-if="!item.optionImg" src="../../assets/images/upload.png" class="upload-img">
            </el-upload>
            <!-- <span style="font-size:12px;">建议尺寸：250px*250px，大小不超过1M，格式为：jpg/bmp/png/gif</span> -->
          </el-form-item>
        </el-col>
        </el-row>
        <!--<el-form-item v-for="(item) in opionsData" :key="item.id" :label="`${item.isRight ? '正确答案':'错误答案'}`">
          <el-input v-model="item.content" placeholder="" style="width: 80%" />
          <el-checkbox v-model="item.isRight" style="margin-left:20px;" />
        </el-form-item>
      </draggable>-->
      <el-form-item label="答案解析">
        <el-input v-model="submemo" type="textarea" :rows="3" placeholder="请输入答案解析" style="width: 80%" @blur="updatememo" />
      </el-form-item>
    </el-form>
  </el-card>

</template>
<script>
import { getToken } from '@/utils/auth'

export default {
  name: 'CardListItem',
  props: {
    index: {
      type: Number,
      default: 0
    },
    title: {
      type: String,
      default: ''
    },
    ask: {
      type: String,
      default: ''
    },
    questionMemo: {
      type: String,
      default: ''
    },
    opionsData: {
      type: Array,
      default: () => {}
    },
    answer: {
      type: String,
      default: ''
    },
    questionType: {
      type: Number,
      default: 0
    },
    aksImg: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      optionNameArray: ['A', 'B', 'C', 'D', 'E'],
      answerList: [],
      submemo: this.questionMemo,
      subask: this.ask,
      subanwser: this.answer,
      subtype: this.questionType,
      subAskImage: this.aksImg,
      token: getToken(),
      uploadurl: process.env.VUE_APP_BASE_API + '/system/buzTask/uploadImg'
    }
  },
  created() {
    console.log('-- cardlist item created--')
  },
  mounted() {
    // console.log('-- cardlist item on Mounted--')
    // console.log(this.title)
    // console.log(this.subtype)
    // console.log(this.token)
    // 初始化选项
    if (this.opionsData.length > 0) {
      this.answerList = this.opionsData
    } else {
      var optioncount = 0
      switch (this.subtype) {
        case 0:
          // 判断题生成2个选项
          optioncount = 2
          break
        case 1:
          // 单选题生成4个选项
          optioncount = 4
          break
        case 2:
          // 多选题生成5个选项
          optioncount = 5
          break
        default:
          break
      }
      for (var i = 0; i < optioncount; i++) {
        this.answerList.push({ character: this.optionNameArray[i], content: '', optionImg: '' })
      }
      console.log(this.answerList)
    }
  },
  methods: {
    onStart() {
      console.log('--onStart--')
    },
    onEnd() {
      console.log('--onEnd--')
    },
    remove(index) {
      console.log('--remove--')
      this.$parent.remove(index)
    },
    changeAsk() {
      console.log(this.subask)
      console.log('--changeInput--')
      this.$parent.changeData(this.index, this.subask)
    },
    updatememo() {
      this.$parent.changeMemo(this.index, this.submemo)
    },
    updateoption() {
      this.$parent.changeOption(this.index, this.answerList)
    },
    updateAnswerKey() {
      this.$parent.changeAnswerKey(this.index, this.subanwser)
    },
    updatequesttionType() {
      this.$parent.changeQuestionType(this.index, this.subtype)
    },
    typeChange() {
      console.log('typeChange-->' + this.subtype)
      // 改变题目类型时根据现有选项类型判断是否加减选项
      var optioncount = this.answerList.length
      var typecount = 0
      switch (this.subtype) {
        case 0:
          // 判断题生成2个选项
          typecount = 2
          break
        case 1:
          // 单选题生成4个选项
          typecount = 4
          break
        case 2:
          // 多选题生成5个选项
          typecount = 5
          break
        default:
          break
      }
      // 判断选项数量是否变化
      if (typecount > optioncount) {
        // 增加选项
        for (var i = optioncount; i < typecount; i++) {
          this.answerList.push({ character: this.optionNameArray[i], content: '', optionImg: '' })
        }
      } else if (typecount < optioncount) {
        // 减少选项
        this.answerList.splice(typecount, optioncount - typecount)
      } else {
        // 选项数量不变
      }
      // console.log(this.answerList)
      // 更新父节点
      this.updatequesttionType()
    },
    askimageHandleAvatarSuccess(res, file) {
      if (res.code === 200) {
        this.subAskImage = res.imgUrl
        this.$parent.changeAksImg(this.index, res.imgUrl)
      }
    },
    askImageBeforeAvatarUpload(file) {
      console.log(file)
    },
    beforeAvatarUpload(e) {
      console.log(e)
    },
    handleAvatarSuccess(res, item) {
      if (res.code === 200) {
        item.optionImg = res.imgUrl
      }
    }
  }
}

</script>
<style scoped>
.box-card {
    width: 100%;
    height: auto;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #454a50;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
  }
  .avatar {
    width: 60px;
    height: 60px;
    display: block;
  }

  .upload-img{
    width: 50px;
    height: 50px;
    display: block;
  }
</style>
